<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="试题创编" name="first">
      <div class="main">

        <div class="block">
          <el-select style="margin-top: 10px;" v-model="bankQuestion.questionSubjectId" filterable placeholder="请选择学科">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div style="height: 60px;">
          <el-input v-model="bankQuestion.questionTitle" placeholder="请输入题干" style="margin-top: 10px;">
            <el-select v-model="bankQuestion.questionType" slot="prepend" placeholder="选择题目类型"
                       @change="handleQuestionTypeChange">
              <el-option label="选择题" value="1"></el-option>
              <el-option label="多选题" value="2"></el-option>
              <el-option label="填空题" value="3"></el-option>
              <el-option label="简答题" value="4"></el-option>
            </el-select>
          </el-input>


        </div>

        <!--        固定选择题宽度-->
        <div v-if="bankQuestion.questionType==1||bankQuestion.questionType==2"
             style="height: 283px;border-bottom: 1px solid #e6e6e6;">
          <!--        编辑内容-->
          <div
              style="height: 230px;margin-left: 70px;margin-top: 10px">
            <div style="height: 180px;">
              <!--循环选项-->
              <div v-for="(item,index) in 4" style="display: flex">
                <el-button plain style="margin-bottom: 10px;position: relative;margin-right: 10px" type="primary">
                  {{ preChoice[index] }}
                </el-button>
                <el-input @input="updateBankQuestionChoice(choiceText[index], index)" v-model="choiceText[index]"
                          v-if="bankQuestion.questionType==1" style="width: 1200px" placeholder="请输入单选题选项描述" clearable/>
                <el-input @input="updateBankQuestionChoice(choiceText[index], index)" v-model="choiceText[index]"
                          v-if="bankQuestion.questionType==2" style="width: 1200px" placeholder="请输入多选题选项描述" clearable/>
              </div>
            </div>

          </div>

          <!--        正确选项答案-->
          <div>
            <!--          单选题-->
            <div v-if="bankQuestion.questionType==1">
              <el-radio-group style="display: flex; flex-direction: row;align-items: start"
                              v-model="bankQuestion.bankQuestionAnswerList[0].answerText">
                <el-radio v-for="(item,index) in 4" @change="handleRadioChange"
                          style="display: flex; flex-direction: row; align-items: center;margin-bottom: 25px;width: 50px"
                          :label="String(index+1)">
                  <div style="font-size: 18px;font-family: 宋体 ;margin-left: 6px;">
                    <span>{{ preChoice[index] }}</span>
                  </div>
                </el-radio>
                <span style="color: #bab5b5;font-size: 10px;margin-top: 3px">*请指定选项的正确答案</span>
              </el-radio-group>

            </div>
            <!--          多选题-->
            <div v-if="bankQuestion.questionType==2">
              <div style="display: flex; flex-direction: row;align-items: start">
                <div v-for="(item,index) in 4" style="width: 80px">
                  <el-checkbox :label="index+1" v-model="bankQuestion.selected" @change="handleRadioChange"
                               style="display: flex; flex-direction: row; align-items: center;margin-bottom: 25px;margin-right: 35px"
                  >
                    <div style="font-size: 18px;font-family: 宋体 ;margin-left: 6px;">
                      <span>{{ preChoice[index] }}</span>
                    </div>
                  </el-checkbox>
                </div>
                <span style="color: #bab5b5;font-size: 10px">*请指定选项的正确答案</span>
              </div>
            </div>

          </div>
        </div>

        <!--        参考答案-->
        <div v-if="bankQuestion.questionType==3||bankQuestion.questionType==4"
             style="height: 283px;margin-top: 10px;border-bottom: 1px solid #e6e6e6;">

          <div v-if="bankQuestion.questionType==3">
            <div v-for="(item,index) in fillInNum"
                 style="height: 40px;display: flex;flex-direction: row;margin-left:70px;margin-bottom: 10px; ">
              <el-button style="font-size: 16px;padding-top: 11px;color: #707070;margin-right: 10px;">{{
                  index + 1
                }}
              </el-button>
              <el-input v-model="bankQuestion.bankQuestionAnswerList[index].answerText"
                        @change="handleRadioChange(index+1)" placeholder="请输入填空题参考答案" clearable/>
            </div>
            <!--            <el-input-number style="display: flex;position: absolute;top: 365px" :min="1" :max="4" size="mini"-->
            <!--                             v-model="fillInNum"  ></el-input-number>-->
          </div>

          <div v-if="bankQuestion.questionType==4">
            <el-input
                @change="handleRadioChange"
                type="textarea"
                placeholder="请输入简答题参考答案"
                v-model="bankQuestion.bankQuestionAnswerList[0].answerText"
                maxlength="300"
                show-word-limit
                :rows="7"
            />

          </div>

        </div>

        <div style="height: 290px">
          <div style="display: flex;flex-direction: row;height: 50px">
            <i class="el-icon-s-order"> </i>
            <p class="lead">试题预览</p>
          </div>
          <div v-if="bankQuestion.questionTitle">
          <span style="height: 30px;display: flex;margin-top: 5px">
            <span v-if="bankQuestion.questionSubjectId"
                  style="color: #409EFF;margin-right: 5px; height: 20px!important;"
            >*{{ options[bankQuestion.questionSubjectId - 1].label }}</span>
            <span style="font-size: 17px" >{{ bankQuestion.questionTitle }} </span>
          </span>
            <div v-if="bankQuestion.questionType==1  || bankQuestion.questionType==2 "
                 v-for="(item,index) in bankQuestion.bankQuestionChoiceList"
                 style="text-align: start"
            >
              <p v-if="item.choiceText" style="margin-left: 10px;display: inline-block ">{{ preChoice[index] }}.</p>
              <p style="margin-left: 10px; display: inline-block">{{ item.choiceText }}</p>
            </div>
            <div v-if="bankQuestion.questionType==3||bankQuestion.questionType==4"
                 v-for="(item,index) in bankQuestion.bankQuestionAnswerList"
                 style="text-align: start"
            >
              <p v-if="item.answerText" style="margin-left: 10px;display: inline-block ">({{ index + 1 }}).</p>
              <p style="margin-left: 10px; display: inline-block">{{ item.answerText }}</p>
            </div>
          </div>
          <div v-else>
            <el-empty :image-size="100" description="请完善您的试题信息" ></el-empty>
          </div>
        </div>

        <!--        提交编撰-->
        <div style="margin-top: 20px">
          <el-button style="display: flex" type="primary" @click="saveBankQuestion">提交</el-button>
        </div>

      </div>
    </el-tab-pane>
  </el-tabs>


  <!--  <el-radio-group  style="display: flex; flex-direction: column;align-items: start">-->
  <!--      <el-radio   style="display: flex; flex-direction: row; align-items: center;margin-bottom: 25px" :label="3">-->
  <!--        <div style=" font-size: 18px;font-family: 宋体 ;margin-left: 10px;">-->
  <!--          <span>A. 选项1</span>-->
  <!--        </div>-->
  <!--      </el-radio>-->
  <!--  </el-radio-group>-->

</template>

<script>
import {saveBankQuestionApi} from "@/api/BankQuestion";
import notification from "@/utils/notification";

export default {
  name: "QuestionMakerView",
  data() {
    return {
      activeName: "first",
      options: [
        {
          value: '1',
          label: '工科'
        }, {
          value: '2',
          label: '理科'
        }, {
          value: '3',
          label: '文科'
        }, {
          value: '4',
          label: '社会科学'
        }, {
          value: '5',
          label: '商科'
        }, {
          value: '6',
          label: '医学'
        }, {
          value: '7',
          label: '艺术'
        }, {
          value: '8',
          label: '体育'
        }, {
          value: '9',
          label: '计算机科学'
        }, {
          value: '10',
          label: '环境科学'
        }],
      //学科的绑定值
      value: '',
      //默认是选择题
      questionType: '1',
      //选项前缀
      preChoice: ['A', 'B', 'C', 'D'],
      //填空题答案 计数
      fillInNum: 4,
      //文本域绑定值
      textarea: '',
      //通用的bankQuestion
      bankQuestion: {
        id: '',
        questionTitle: '',
        questionType: '1',
        questionSubjectId: '',
        bankQuestionChoiceList: [
          {
            id: '',
            questionId: '',
            choiceText: '',
            choiceOrder: ''
          },
          {
            id: '',
            questionId: '',
            choiceText: '',
            choiceOrder: ''
          },
          {
            id: '',
            questionId: '',
            choiceText: '',
            choiceOrder: ''
          },
          {
            id: '',
            questionId: '',
            choiceText: '',
            choiceOrder: ''
          }
        ],
        bankQuestionAnswerList: [
          {
            id: '',
            questionId: '',
            answerText: "",
            answerOrder: ''
          },
          {
            id: '',
            questionId: '',
            answerText: "",
            answerOrder: ''
          },
          {
            id: '',
            questionId: '',
            answerText: "",
            answerOrder: ''
          },
          {
            id: '',
            questionId: '',
            answerText: "",
            answerOrder: ''
          },
        ],
        selected: [],
      },
      //选项内容
      bankQuestionAnswerList: [
        {
          id: '',
          questionId: '',
          answerText: '',
          answerOrder: ''
        },
        {
          id: '',
          questionId: '',
          answerText: '',
          answerOrder: ''
        },
        {
          id: '',
          questionId: '',
          answerText: '',
          answerOrder: ''
        },
        {
          id: '',
          questionId: '',
          answerText: '',
          answerOrder: ''
        },
      ],
      choiceText: ['', '', '', ''],
      selected: [],

    }
  },
  methods: {
    async saveBankQuestion() {

      let confirm = await this.$myConfirm("确认提交试题？")
      if (confirm) {
        saveBankQuestionApi(this.bankQuestion).then(res => {
          if (res.data.code == 200) {
            console.info(res.data.data)
            notification.ntfCommonSuccess("提示", res.data.msg)
          }
        })
      }
      this.handleQuestionTypeChange()
    },
    //切换选项时清空缓存
    handleQuestionTypeChange() {

      this.selected=[];
      this.choiceText = ['', '', '', ''];

      this.bankQuestion.id = '';
      this.bankQuestion.questionTitle = '';
      // this.bankQuestion.questionType = '1';  不需要清空题目类型
      this.bankQuestion.questionSubjectId = '';

      this.bankQuestion.bankQuestionChoiceList.forEach(choice => {
        choice.id = '';
        choice.questionId = '';
        choice.choiceText = '';
        choice.choiceOrder = '';
      });

      this.bankQuestion.bankQuestionAnswerList.forEach(answer => {
        answer.id = '';
        answer.questionId = '';
        answer.answerText = '';
        answer.answerOrder = '';
      });
    },
    //更新题目的选项信息
    updateBankQuestionChoice(data, index) {
      // console.info("data, index为",data,index)
      this.bankQuestion.bankQuestionChoiceList[index].choiceText = data;
      this.bankQuestion.bankQuestionChoiceList[index].choiceOrder = index + 1;
      console.info("this.bankQuestion为", this.bankQuestion)
    },
    //更新 题目的答案排序信息和内容
    handleRadioChange(value) {
      // 单选题将选中的选项的answerOrder设置为1
      if (this.bankQuestion.questionType == 1)
        this.bankQuestion.bankQuestionAnswerList[0].answerOrder = 1;

      // 多选题的选项信息
      if (this.bankQuestion.questionType == 2) {


        console.info("this.bankQuestion.selected", this.bankQuestion.selected)
      }

      if (this.bankQuestion.questionType == 3) {
        this.bankQuestion.bankQuestionAnswerList[value - 1].answerOrder = value;
      }

      if (this.bankQuestion.questionType == 4) {
        this.bankQuestion.bankQuestionAnswerList[0].answerOrder = 1;
      }

      console.info("this.bankQuestion为", this.bankQuestion)
    }
  }
}
</script>

<style scoped>

.el-icon-s-order {
  color: #409EFF;
  font-size: 30px !important;
  padding-top: 18px;
}

.lead {
  display: flex;
  text-align: start;
  font-size: 19px;
  line-height: 34px;
  font-weight: 300;
  color: #262626;
  padding-top: 2px;
}

/deep/ .el-select .el-input {
  width: 130px !important;
}

/deep/ .input-with-select .el-input-group__prepend {
  background-color: #fff !important;
}

.subject {
  padding-top: 19px;
  width: 100px;
  font-size: 17px;
  font-family: 微软雅黑;
}

.block {
  display: flex;
  height: 60px;
//background-color: #edf1f5;
}

.main {
  height: 790px;
  margin-left: 60px;
  margin-right: 60px;
}
</style>